<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-14 15:28:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-25 11:03:50
-->
<template>
    <dv-scroll-board v-if="floorScore.length > 0" :config="tableConfig" ref="scrollBoard"
        :style="'width:100%;height:' + floorScoreHeight + 'px;'" />
    <div v-else :style="'width:100%;height:' + nodateFloorScoreHeight + 'px;position: relative;'">
        <NoDate></NoDate>
    </div>
    
</template>
<script>
import NoDate from '../components/Common/NoDate.vue'
export default {
    components: {
        NoDate
    },
    props: {
        // 床位集合
        floorScore: {
            type: Array,
            default: []
        },
        floorScoreBol: {
            type: Boolean,
            default: false
        },
        floorScoreHeight: {
            type: Number,
            default: 0
        },
        nodateFloorScoreHeight: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            innerHeight: window.innerHeight,
            tableConfig: {
                header: [
                    // '<span style="color:#01C7FF;">序号</span>',
                    '<span style="color:#01C7FF;">姓名</span>',
                    '<span style="color:#01C7FF;">班级</span>',
                    '<span style="color:#01C7FF;">房间</span>',
                    '<span style="color:#01C7FF;">评分</span>',
                ],
                data: [],
                align: ['center', 'center', 'center', 'center', 'center'],
                headerBGC: 'linear-gradient( , rgba(0,67,191,0.41) 0%, rgba(0,67,191,0) 100%);',
                rowNum: Math.floor(this.floorScoreHeight / 44),
                headerHeight: 44,
                hoverPause: true,
                oddRowBGC: 'linear-gradient( 90deg, rgba(16,40,73,0) 0%, rgba(107,221,248,0.5) 51%, rgba(16,40,73,0) 100%)',
                evenRowBGC: 'rgba(18,108,254,0.11)',
            }
        }
    },
    watch: {
        floorScore: {
            handler: function (newValue, oldValue) {
                if (JSON.stringify(newValue) !== JSON.stringify(oldValue) && oldValue.length !== 0) {
                    this.$refs.scrollBoard.updateRows(this.floorScore)
                }
                this.Innit()
            }
        },
        floorScoreHeight: {
            handler: function (newValue, oldValue) {
                this.Innit()
            }
        }
    },
    methods: {
        Innit() {
            this.$nextTick(() => {
                setTimeout(() => {
                    if (this.floorScore) {
                        if (!this.floorScoreBol) {
                            const params = {
                                header: [
                                    // '<span style="color:#01C7FF;">序号</span>',
                                    '<span style="color:#01C7FF;">姓名</span>',
                                    '<span style="color:#01C7FF;">班级</span>',
                                    '<span style="color:#01C7FF;">房间</span>',
                                    '<span style="color:#01C7FF;">评分</span>',
                                ],
                                data: this.floorScore,
                                align: ['center', 'center', 'center', 'center', 'center'],
                                headerBGC: 'linear-gradient( , rgba(0,67,191,0.41) 0%, rgba(0,67,191,0) 100%);',
                                rowNum: Math.floor(this.floorScoreHeight / 44),
                                headerHeight: 44,
                                hoverPause: true,
                                oddRowBGC: 'linear-gradient( 90deg, rgba(16,40,73,0) 0%, rgba(107,221,248,0.5) 51%, rgba(16,40,73,0) 100%)',
                                evenRowBGC: 'rgba(18,108,254,0.11)',
                            }
                            this.tableConfig = params
                            this.$emit('setFloorScoreBol', false)
                        } else {
                        }
                    }
                })
            })
        }
    },
    async mounted() {
        this.Innit()
    }
}
</script>
<style lang="less" scoped>
.dv-scroll-board {
    margin-top: 10px;
}
</style>